<template>
  <div style="background: #ebf5fb">
    <!-- <ul>
      <li v-for="item in pages" :key="item.content">
        <router-link :to="{ path: '/user-about' + item.path }">{{
          item.content
        }}</router-link>
      </li>
    </ul> -->
    <el-row class="tac">
      <!--      <el-col :span="2" style="background: #8cc5ff">-->
      <el-menu
        style="width: 100%"
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        text-color="black"
        active-text-color="red"
        router
      >
        <el-menu-item
          v-for="page in pages"
          :key="page.content"
          :index="'/user-about' + page.path"
          @click="changePage(page.path)"
        >
          <i :class="page.iconpath"></i>
          <span>
            {{ page.content }}
          </span>
        </el-menu-item>
      </el-menu>
      <!--      </el-col>-->
    </el-row>
  </div>
</template>

<script>
export default {
  name: "UserItemMenu",
  data() {
    return {
      pages: [
        {
          path: "/order",
          content: "我的订单",
          iconpath:"el-icon-shopping-bag-2"
        },
        {
          path: "/cart",
          content: "购物车",
          iconpath:"el-icon-shopping-cart-2"
        },
        {
          path: "/user-detail",
          content: "个人信息",
          iconpath:"el-icon-user-solid"
        },
        {
          path: "/receipt-address",
          content: "收货地址",
          iconpath:"el-icon-s-home"
        },
        {
          path: "/user-collection",
          content: "商品收藏",
          iconpath:"el-icon-star-on"
        },
        {
          path: "/wait-evaluate",
          content: "待评价",
          iconpath:"el-icon-edit"
        },
      ],
    };
  },
  methods: {
    //控制页面跳转
    changePage(path) {
      this.$router.push({
        path: "/user-about" + path,
      });
    },
  },
};
</script>

<style scoped>
.el-menu-item {
  margin: 50px auto;
}
.el-menu-item:hover {
  background: #ebf5fb;
}
</style>
